<template>
  <div class="login_box">
    <div class="theme_box" @click="changeTheme">主题</div>
    <div class="box">
      <div class="title"><div class="font">远程-云桌面</div></div>
      <div class="content">
        <div class="icon"></div>
        <div class="form">
          <div class="form_control">
            <input type="text" placeholder="请输入用户名" ref="username" />
            <small class="small">用户名不能为空</small>
          </div>
          <div class="form_control">
            <input type="text" placeholder="请输入密码" ref="pwd" />
            <small class="small">密码不能为空</small>
          </div>
          <div class="form_control">
            <button @click="login">登录</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { useStore } from 'vuex'
// import BIRDS from 'vanta/src/vanta.birds'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import theme from '../../utils/theme/theme'
const store = useStore()
const router = useRouter()
// const vantaRef = ref(null)
const username = ref(null)
const pwd = ref(null)
const themeColor = ref(true)
// const vanta = ref(null)
function login () {
  checkVal()
  if (username.value.value.trim() && pwd.value.value.trim()) {
    const data = {
      username: username.value.value.trim(),
      password: pwd.value.value.trim()
    }
    store
      .dispatch('user/login', data)
      .then((res) => {
        if (res === 201) {
          ElMessage({
            type: 'error',
            message: '用户名或密码错误'
          })
        } else if (res === 200) {
          console.log(router)
          ElMessage({
            type: 'success',
            message: '登录成功'
          })
          router.replace('/layout')
        }
      })
      .catch(() => {
        ElMessage({
          type: 'warning',
          message: '系统服务异常'
        })
      })
  }
}
function checkVal () {
  [username.value, pwd.value].map((v) => {
    if (v.value.trim()) {
      v.parentElement.lastChild.className = 'small'
    } else {
      v.parentElement.lastChild.className = 'show'
    }
  })
}
function keyDown (e) {
  if (e.keyCode === 13) {
    login()
  }
}
function changeTheme () {
  themeColor.value = !themeColor.value
  if (themeColor.value) {
    theme('dark')
  } else {
    theme('light')
  }
}
changeTheme()
onMounted(() => {
  // vanta.value = BIRDS({
  //   el: vantaRef.value,
  //   mouseControls: true,
  //   touchControls: true,
  //   gyroControls: false,
  //   scale: 1.0,
  //   scaleMobile: 1.0,
  //   color1: 0x374d78,
  //   birdSize: 1.5,
  //   wingSpan: 15,
  //   speedLimit: 3.0,
  //   separation: 44.0,
  //   alignment: 26.0,
  //   cohesion: 26.0,
  //   quantity: 4.0,
  //   backgroundAlpha: 0.48,
  //   backgroundColor: '#203d6b'
  // })
  window.addEventListener('keydown', keyDown)
})
onBeforeUnmount(() => {
  window.removeEventListener('keydown', keyDown)
  // if (vanta.value) {
  //   vanta.value.onDestroy()
  // }
})
</script>
<style lang="less" scoped>
.login_box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--theme-bg);
  position: relative;
  .box {
    width: 600px;
    height: 350px;
    background: rgba(32, 61, 107, 0.9);
    display: flex;
    padding: 20px;
    align-items: center;
    border-radius: 10px;
    flex-direction: column;
    justify-content: center;

    .content {
      width: 100%;
      display: flex;
      height: 90%;
    }
    .title {
      height: 10%;
      width: 100%;
      display: flex;
      color: rgb(39, 213, 211);
      margin-bottom: 30px;
      font-size: 30px;
      font-weight: bold;
      .font {
        width: 50%;
        height: 100%;
        display: flex;
        justify-content: center;
      }
    }
    .icon {
      width: 50%;
      height: 80%;
      background-image: url("~@/assets/images/icon.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      margin-right: 20px;
    }
    .form {
      width: 50%;
      height: 80%;
      border-left: 1px solid rgb(39, 213, 211);
      .form_control {
        width: 100%;
        padding: 0 20px;
        input,
        button {
          width: 100%;
          margin-top: 40px;
          font-size: 15px;
        }
        .small {
          display: block;
          opacity: 0;
        }
        .show {
          opacity: 1;
          color: var(--error-color);
        }
        .color {
          border-bottom: var(--error-color);
        }
        .iscolor {
          border-bottom: var(--success-color);
        }
        input {
          // background: rgb(32, 61, 107);
          background: rgba(32, 61, 107, 0.9);
          border: none;
          border-bottom: 1px solid rgb(121, 129, 144);
          padding: 0 10px;
          color: white;
          outline: none;
        }
        button {
          width: 100%;
          height: 30px;
          border: none;
          font-size: 15px;
          position: relative;
          color: #ffffff;
          transition-duration: 0.4s;
          background: rgb(39, 213, 211);
          border-radius: 5px;
          outline: none;
        }
        button:after {
          content: "";
          background: rgb(38, 139, 142);
          display: block;
          position: absolute;
          padding-top: 30px;
          padding-left: 100%;
          margin-left: 0px !important;
          margin-top: -25px;
          opacity: 0;
          transition: all 0.8s;
        }
        button:active:after {
          padding: 0;
          margin: 0;
          opacity: 1;
          transition: 0s;
        }
      }
    }
  }
  .theme_box {
    position: absolute;
    color: red;
    top: 20px;
    right: 20px;
  }
}
</style>
